<template>
  <div class="org_roleList">
    <h3>角色管理</h3>
    <div class="input_box">
      <el-button size="small" icon="el-icon-circle-plus" class="addAll" style="float: right;margin-right:30px"
                 @click="addRole">角色添加
      </el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%;text-align:center" size="small">
        <el-table-column prop="id" label="权限ID" min-width="60" sortable fixed></el-table-column>
        <el-table-column prop="name" label="角色名称" min-width="120" sortable>
          <template v-slot="scope">
            <span style="color:#009688;cursor:pointer">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="250">
          <template v-slot="scope">
            <el-button @click="handleEdit(scope.row)"
                       style="color:#fff;background:#008a96"
                       size="small">编辑权限
            </el-button>
            <el-button @click="handleDelete(scope.row.id)"
                       style="color:#fff;background:#008a96"
                       size="small">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page_option.current_page"
          :page-sizes="[15, 20, 30, 50]"
          :page-size="page_option.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page_option.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value0: [],
      selectData: {
        name: "",
      },
      tableData: [],
      page_option: {
        current_page: 1,
        page_size: 15,
        total: 0,
      }
    };
  },
  mounted() {
    this.getList(this.page_option.current_page, this.page_option.page_size);
  },
  methods: {
    // 查看成员
    checkName(row) {
      console.log(row);
      this.$router.push({path:"/authority/role/lookRole",query:{id:row.id,name:encodeURIComponent(row.name)}})
      // this.$router.push({ name: "lookRole", params: { id: row.id, school: row.schoolName, RName: row.name } });
    },
    handleEdit(row) {
      this.$router.push({ path: "/authority/role/edit", query: { id:row.id,name:encodeURIComponent(row.name)}});
    },
    //条件查询
    select() {
      this.page_option.current_page = 1;
      this.getList(1, this.page_option.page_size);
    },
    //获取表格数据
    getList(pageNum, pageSize) {
      let params = {
        pageSize,
        pageNum
      };
      this.$api.authority.getRoleList(params)
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            let data = res.data;
            this.tableData = data.list;
            this.page_option.total = data.total;
          }
        });
    },
    handleSizeChange(size) {
      this.page_option.page_size = size;
      this.page_option.current_page = 1;
      this.getList(this.page_option.current_page, this.page_option.page_size);
    },
    handleCurrentChange(current) {
      this.page_option.current_page = current;
      this.getList(this.page_option.current_page, this.page_option.page_size);
    },
    // 角色删除
    handleDelete(id) {
      let that = this;
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        that.$api.authority.roleDelete({id})
        .then((res)=>{
           if(res.code===200){
             that.$message.success("删除成功");
             that.getList(that.page_option.current_page,that.page_option.page_size)
           }
        })
      }).catch(() => {
        this.$message.info("已取消！");
      });
    },
    addRole() {
      this.$router.push({ path: "/authority/role/add" });
    }
  }
};
</script>
<style scoped>
@import url('./list.css');
</style>
<style>
.el-tooltip__popper.is-light {
  max-width: 500px;
}
</style>



